<%@ page language="java" contentType="text/html; charset=utf-8 " import="service.person.*,domain.Person,java.util.*"
pageEncoding="utf-8"%>
<html>

<head>
    <meta charset="utf-8">
    <base href="<%=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/" %>"/>
    <title>XH国体中心飞镖争霸赛后台管理系统</title>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="admin/public/css/xh.css">
    <link rel="stylesheet" type="text/css" href="admin/public/css/xhico.css">
    <link rel="stylesheet" type="text/css" href="admin/public/css/main.css?tmp=23">
    <link rel="stylesheet" type="text/css" href="admin/public/Font/font-awesome-4.7.0/css/font-awesome.min.css">
    <script src="admin/public/js/jquery.js" type="text/javascript"></script>
    <script src="admin/public/js/xh.js?tmp=123" type="text/javascript"></script>
    <script src="admin/public/js/main.js" type="text/javascript"></script>
</head>
<style>
*{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.table-wrapper{
    margin: 10px 70px 70px;
    box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2 );
}

.fl-table {
    border-radius: 5px;
    font-size: 12px;
    font-weight: normal;
    border: none;
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    background-color: white;
}

.fl-table td, .fl-table th {
    text-align: center;
    padding: 8px;
}

.fl-table td {
    border-right: 1px solid #f8f8f8;
    font-size: 12px;
}

.fl-table thead th {
    color: #ffffff;
    background: #4FC3A1;
}


.fl-table thead th:nth-child(odd) {
    color: #ffffff;
    background: #324960;
}

.fl-table tr:nth-child(even) {
    background: #F8F8F8;
}

/* Responsive */

@media (max-width: 767px) {
    .fl-table {
        display: block;
        width: 100%;
    }
    .table-wrapper:before{
        content: "Scroll horizontally >";
        display: block;
        text-align: right;
        font-size: 11px;
        color: white;
        padding: 0 0 10px;
    }
    .fl-table thead, .fl-table tbody, .fl-table thead th {
        display: block;
    }
    .fl-table thead th:last-child{
        border-bottom: none;
    }
    .fl-table thead {
        float: left;
    }
    .fl-table tbody {
        width: auto;
        position: relative;
        overflow-x: auto;
    }
    .fl-table td, .fl-table th {
        padding: 20px .625em .625em .625em;
        height: 60px;
        vertical-align: middle;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        width: 120px;
        font-size: 13px;
        text-overflow: ellipsis;
    }
    .fl-table thead th {
        text-align: left;
        border-bottom: 1px solid #f7f7f9;
    }
    .fl-table tbody tr {
        display: table-cell;
    }
    .fl-table tbody tr:nth-child(odd) {
        background: none;
    }
    .fl-table tr:nth-child(even) {
        background: transparent;
    }
    .fl-table tr td:nth-child(odd) {
        background: #F8F8F8;
        border-right: 1px solid #E6E4E4;
    }
    .fl-table tr td:nth-child(even) {
        border-right: 1px solid #E6E4E4;
    }
    .fl-table tbody td {
        display: block;
        text-align: center;
    }
}
</style>
<%
    PersonService personService = new PersonServiceImpl();
    List<Person> list = personService.getPersonList("白衣天使组");
%>
<body>
    <div class="xh-main">
        <div class="t-box">
            2021国体中心第二届迎新年会员飞镖争霸赛-白衣天使组
        </div>
        <div class="t-tab">
            <div class="table-wrapper">
                <table class="fl-table">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>性别</th>
                    	<th>年龄</th>
                        <th>联系方式</th>
                        <th>身份证号</th>
                        <th>参赛组别</th>
                    </tr>
                    </thead>
                    <tbody>

                                        <%
                                        for(int i =0; i<list.size();i++){ %>
                                        <tr>
                                            <td><%=list.get(i).getId() %></td>
                                            <td><%=list.get(i).getName() %></td>
                                            <td><%=list.get(i).getSex() %></td>
                                        	<td><%=list.get(i).getAge() %></td>
                                            <td><%=list.get(i).getPhone() %></td>
                                            <td><%=list.get(i).getIdcard() %></td>
                                            <td><%=list.get(i).getBM() %></td>
                                        </tr>
                                                <% } %>
                                        </tbody>

                </table>
                <% if(list.size()==0){ %><center>暂无数据</center> <%} %>
            </div>
        </div>
    </div>

</body>

</html>